import React, { useState, useEffect } from 'react';
import './Favorites.css'; // 您可以根据需要在这里添加样式
import { useNavigate } from 'react-router-dom';  // 引入 useNavigate Hook
import { getMyCollection } from '../api/userApi';

const Favorites = () => {
  // 使用 useNavigate 获取 navigate 函数
  const navigate = useNavigate();

  // 页面跳转函数
  const handleNavigate = (path) => {
    navigate(path);  // 通过 navigate 进行跳转
  };

  const [loading, setLoading] = useState(true);      // 加载状态
  const [error, setError] = useState(null);          // 错误状态
  const [userId, setUserId] = useState(null); // 新增 userId 状态
  const [favoritesTopic, setFavoritesTopic] = useState([]);  // 初始化为空数组

  // 获取 userId
  useEffect(() => {
    const storedUserId = localStorage.getItem('userId');
    if (storedUserId) {
      setUserId(storedUserId);
    }
  }, []); // 确保只运行一次
  
  useEffect(() => {
    if (userId) {
      setLoading(true);  // 请求开始时设置加载状态
      getMyCollection(userId)
        .then((data) => {
          setFavoritesTopic(data);  
          console.log(favoritesTopic);
          setLoading(false);  // 请求完成时设置加载状态为 false
        })
        .catch((error) => {
          setError('Error fetching followers: ' + error.message);  // 设置错误信息
          setLoading(false);
        });
    }
  }, [userId]);  
    
    // 渲染话题数据
    const favorites = favoritesTopic.map((topic) => ({
      interestId: topic.interestId, 
      title: topic.name,
   }));


  return (
    <div className="favorites">
      <div className='favorites-header'>
        {/* 点击后跳转到我的收藏页面 */}
        <h2 onClick={() => handleNavigate(`/mypage/topics/${userId}`)}>我的收藏</h2>  
      </div>
      <div className="favorites-list">
        {favorites.length > 0 ? (
          favorites.map((item,index) => (
            <div key={item.interestId} className="favorite-item">
              <p onClick={() => handleNavigate(`/topic/${item.interestId}`)}>#{item.title}</p>
            </div>
          ))
        ) : (
          <p>目前没有收藏的帖子。</p>
        )}
      </div>
    </div>
  );
};

export default Favorites;
